/* 
  npm i react-router-dom@5.3
  导入组件：HashRouter，Route，Link
  使用HashRouter 和Route组件
  使用Link去跳转
  // HashRouter和BrowserRouter的区别是，Hash前面带/#号，Browser是/没有#号。
  // Hash在地址栏上输入路径回车不会刷新页面，Browser在地址栏上输入路径回车会刷新页面！
  // 无论哪种模式(HashRouter,BrowserRouter)，我们只需要关心"路径"即可。
*/
import React, { Component } from 'react';
// HashRouter————带#号
// import { HashRouter as Router, Route, Link } from 'react-router-dom';
// BrowserRouter————history没有#号
import { HashRouter as Router, Route, Link, NavLink } from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* Router负责路由实例化，包裹着所有路由代码 */}
        <Router>
          {/* Link组件，to属性代表我们要跳转的路径，需要以/开头*/}
          <Link to="/home">首页</Link> | &nbsp;
          <Link to="/myMusic">我的音乐</Link> | &nbsp;
          <Link to="/myFriend">我的朋友</Link>
          <br />
          {/* NavLink与Link的区别是，NavLink选中会自带一个active类名 */}
          <NavLink to="/home">首页</NavLink>| &nbsp;
          <NavLink to="/myMusic">我的音乐</NavLink>| &nbsp;
          <NavLink to="/myFriend">我的朋友</NavLink>
          {/* ———————————————————————————————————————————————————— */}
          {/* path配置路由的路径，component挂载组件名 */}
          {/* path只需要写路径即可，不要写#/home */}
          <Route path="/home" component={Home}></Route>
          <Route path="/myMusic" component={MyMusic}></Route>
          <Route path="/myFriend" component={MyFriend}></Route>
        </Router>
      </div>
    );
  }
}

function Home() {
  return <h3>我是首页组件</h3>;
}
function MyMusic() {
  return <h3>我是我的音乐组件</h3>;
}
function MyFriend() {
  return <h3>我是我的朋友组件</h3>;
}
